import React from 'react';
import { AttachmentIcon, DeleteIcon } from './Icons';
import { File } from '../types/chat';

interface FileListProps {
  files: File[];
  onRemoveFile: (file: File) => void;
}

const FileList: React.FC<FileListProps> = ({ files, onRemoveFile }) => {
  if (files.length === 0) return null;
  
  // 获取文件大小的可读格式
  const formatFileSize = (bytes: number): string => {
    if (bytes === 0) return '0 B';
    
    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(1024));
    
    return `${parseFloat((bytes / Math.pow(1024, i)).toFixed(2))} ${sizes[i]}`;
  };
  
  return (
    <div className="file-list">
      {files.map((file, index) => (
        <div key={index} className="file-item">
          <div className="file-item-icon">
            <AttachmentIcon className="icon" />
          </div>
          <div className="file-item-name" title={file.name}>
            {file.name}
          </div>
          <div className="file-item-size">
            {formatFileSize(file.size)}
          </div>
          <button 
            className="file-item-remove" 
            onClick={(e) => {
              e.stopPropagation();
              onRemoveFile(file);
            }}
            title="移除文件"
          >
            <DeleteIcon className="icon" />
          </button>
        </div>
      ))}
    </div>
  );
};

export default FileList; 